<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组织架构管理 - HRM系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/department.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="dashboard">
    <header class="header">
        <div class="logo">HRM系统</div>
        <div class="user-info">
            <span th:text="${currentUser.realName}"></span>
            <span class="role-badge" th:text="${currentUser.roleId.roleName}"></span>
            <a href="/logout" class="logout-btn">退出</a>
        </div>
    </header>
    <main class="department-container">
        <!-- 返回首页按钮 -->
        <div class="back-to-home">
            <a href="/home" class="btn btn-back">← 返回首页</a>
        </div>

        <!-- 页面标题和操作按钮 -->
        <div class="module-header">
            <h1 class="module-title">组织架构管理</h1>
            <div th:if="${success}" data-flash-success th:text="${success}"></div>
            <div th:if="${error}" data-flash-error th:text="${error}"></div>
            <div class="action-buttons">
                <button id="expandAllBtn" class="btn btn-expand">
                    <i class="fas fa-chevron-down"></i> 全部展开
                </button>
                <button id="collapseAllBtn" class="btn btn-collapse">
                    <i class="fas fa-chevron-up"></i> 全部折叠
                </button>
                <button onclick="exportDepartments()" class="btn btn-export">导出Excel</button>
                <a href="/department/add" class="btn btn-primary btn-add-top-dept" th:if="${roleIdValue lt 3}">添加顶级部门</a>
            </div>
        </div>

        <!-- 搜索区域 -->
        <div class="search-filter">
            <form class="search-form">
                <div class="form-group search-group">
                    <input type="text" class="form-control search-input" placeholder="输入部门名称或编码">
                    <button type="submit" class="btn btn-search">搜索</button>
                    <button type="reset" class="btn btn-reset">重置</button>
                </div>
            </form>
        </div>

        <!-- 部门表格 -->
        <div class="department-tree">
            <table class="data-table">
                <thead>
                <tr>
                    <th width="30%">部门名称</th>
                    <th width="15%">部门编码</th>
                    <th width="20%">负责人</th>
                    <th width="10%">状态</th>
                    <th width="25%">操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 递归渲染部门树 -->
                <th:block th:each="dept : ${departments}">
                    <!-- 顶级部门 -->
                    <tr class="department-row" th:data-id="${dept.departmentID}">
                        <td>
                                <span class="toggle-icon"
                                      th:if="${not #lists.isEmpty(dept.subDepartments)}">+</span>
                            <span th:text="${dept.departmentName}"></span>
                        </td>
                        <td th:text="${dept.departmentCode}"></td>
                        <td th:text="${dept.departmentHeadID?.realName} ?: '未设置'"></td>
                        <td>
                                <span th:class="${dept.status} ? 'status-active' : 'status-inactive'"
                                      th:text="${dept.status} ? '启用' : '禁用'"></span>
                        </td>
                        <td class="action-buttons">
                            <!-- 第一行按钮 -->
                            <div class="button-row">
                                <a th:href="@{/department/view/{id}(id=${dept.departmentID})}" class="btn-action view">查看</a>
                                <a th:href="@{/department/edit/{id}(id=${dept.departmentID})}" class="btn-action edit">编辑</a>
                                <a th:href="@{/department/toggle-status/{id}(id=${dept.departmentID})}"
                                   class="btn-action"
                                   th:class="${dept.status} ? 'btn-action disable' : 'btn-action enable'"
                                   th:text="${dept.status} ? '禁用' : '启用'"
                                   data-method="post"></a>
                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        document.body.addEventListener('click', function(event) {
                                            if (event.target.matches('a[data-method="post"]')) {
                                                event.preventDefault();

                                                // 创建隐藏表单
                                                const form = document.createElement('form');
                                                form.method = 'POST';
                                                form.action = event.target.getAttribute('href');

                                                // 提交表单
                                                document.body.appendChild(form);
                                                form.submit();
                                            }
                                        });
                                    });
                                </script>
                                <a th:href="@{/department/delete/{id}(id=${dept.departmentID})}"
                                   class="btn-action delete"
                                   data-method="post"
                                   onclick="return confirm('确定要删除该部门吗？')">删除</a>
                            </div>
                            <!-- 第二行按钮 -->
                            <div class="button-row">
                                <a th:href="@{/department/set-head/{id}(id=${dept.departmentID})}" class="btn-action set-head">设置负责人</a>
                                <a th:href="@{/department/add-child/{id}(id=${dept.departmentID})}"
                                   class="btn-action add-child"
                                   th:if="${roleIdValue lt 4}">添加子部门</a>
                            </div>
                        </td>
                    </tr>

                    <!-- 子部门（递归部分） -->
                    <th:block th:insert="~{fragments/department-tree :: tree-fragment(${dept.subDepartments}, 1)}"
                              th:if="${not #lists.isEmpty(dept.subDepartments)}"></th:block>
                </th:block>
                </tbody>
            </table>
        </div>
    </main>
</div>

<!-- 设置负责人弹窗 -->
<div id="setHeadModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3>设置部门负责人</h3>
        <form id="setHeadForm">
            <input type="hidden" id="departmentId" name="departmentId">
            <div class="form-group">
                <label for="headSelect">选择负责人:</label>
                <select id="headSelect" name="headId" class="form-control" required>
                    <option value="">-- 请选择 --</option>
                </select>
                <small class="form-text text-muted">负责人必须属于当前部门或其父部门</small>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">确定</button>
                <button type="button" class="btn btn-secondary cancel-btn">取消</button>
            </div>
        </form>
    </div>
</div>

<script th:src="@{/js/department.js}"></script>
</body>
</html>